<template>
  <div class="wrapper" v-if="EchartData">
    <!-- <div class="item">
      <div class="title">
        <div class="name">应申报户次</div>
        <img class="icon" v-if="EchartData.ysbhc1.bdl>0" src="~@/assets/images/topIcon.png" alt />
        <img class="icon" v-else src="~@/assets/images/downIcon.png" alt />
        <div class="percent">{{EchartData.ysbhc1.bdl}}%</div>
      </div>
      <div class="text border">
        <img class="icon" src="~@/assets/images/menu-7.png" alt />
        <div class="num">{{toThousands(EchartData.ysbhc1.ysbhc1tq)}}</div>
        <div class="dw">户次</div>
      </div>
      <div class="text">
        <img class="icon" src="~@/assets/images/menu-8.png" alt />
        <div class="num">{{toThousands(EchartData.ysbhc1.ysbhc1lj)}}</div>
        <div class="dw">户次</div>
      </div>
    </div>-->
    <div class="item">
      <div class="title">
        <div class="name">全年申报户次</div>
        <img
          class="icon"
          v-if="EchartData.ysbhc2.bdl > 0"
          src="~@/assets/images/topIcon.png"
          alt
        />
        <img
          class="icon"
          v-if="EchartData.ysbhc2.bdl < 0"
          src="~@/assets/images/downIcon.png"
          alt
        />
        <div class="percent">{{ EchartData.ysbhc2.bdl }}%</div>
      </div>
      <div class="text border">
        <div class="icon to">{{ toyear }}年</div>
        <div class="num">{{ toThousands(EchartData.ysbhc2.ysbhc2lj) }}</div>
        <div class="dw">户次</div>
      </div>
      <div class="text">
        <div class="icon prev">{{ toyear - 1 }}年</div>
        <div class="num">{{ toThousands(EchartData.ysbhc2.ysbhc2tq) }}</div>
        <div class="dw">户次</div>
      </div>
    </div>
    <!-- <div class="item">
      <div class="title">
        <div class="name">申报笔数</div>
        <img class="icon" v-if="EchartData.sbbs.bdl>0" src="~@/assets/images/topIcon.png" alt />
        <img class="icon" v-else src="~@/assets/images/downIcon.png" alt />
        <div class="percent">{{EchartData.sbbs.bdl}}%</div>
      </div>
      <div class="text bi border">
        <img class="icon" src="~@/assets/images/menu-7.png" alt />
        <div class="num">{{toThousands(EchartData.sbbs.sbbstq)}}</div>
        <div class="dw">笔</div>
      </div>
      <div class="text bi">
        <img class="icon" src="~@/assets/images/menu-8.png" alt />
        <div class="num">{{toThousands(EchartData.sbbs.sbbslj)}}</div>
        <div class="dw">笔</div>
      </div>
    </div>-->
    <div class="item">
      <div class="title">
        <div class="name">全年申报金额</div>
        <img
          class="icon"
          v-if="EchartData.sbje.bdl > 0"
          src="~@/assets/images/topIcon.png"
          alt
        />
        <img
          class="icon"
          v-if="EchartData.sbje.bdl < 0"
          src="~@/assets/images/downIcon.png"
          alt
        />
        <div class="percent">{{ EchartData.sbje.bdl }}%</div>
      </div>
      <div class="text money border">
        <div class="icon to">{{ toyear }}年</div>
        <div class="num">{{ toThousands(EchartData.sbje.sbjelj) }}</div>
        <div class="dw">亿元</div>
      </div>
      <div class="text money">
        <div class="icon prev">{{ toyear - 1 }}年</div>
        <div class="num">{{ toThousands(EchartData.sbje.sbjetq) }}</div>
        <div class="dw">亿元</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "xshcbsje",
  data() {
    return {
      toyear: new Date().getFullYear(),
      prevDate: null,
      EchartData: null, // 图表数据;
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.ajax({
      url: "/dpzsSbcxService/xshcbsjeQuery",
      method: "post",
      data: {
        param: {
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
    });
  },
  methods: {
    toThousands(num = 0) {
      return num.toString().replace(/\d+/, function (n) {
        return n.replace(/(\d)(?=(?:\d{4})+$)/g, "$1,");
      });
    },
  },
};
</script>
<style scoped lang="scss">
.wrapper {
  display: flex;
  justify-content: space-evenly;
  padding-top: 12px;
  width: 1862px;
  height: 152px;

  .item {
    padding-left: 136px;
    flex: 0 0 380 px;
    width: 426px;
    height: 128px;
    background-size: 100% 100%;
    &:nth-child(1) {
      background-image: url(~@/assets/images/bg-8.png);
    }
    &:nth-child(2) {
      background-image: url(~@/assets/images/bg-9.png);
    }
    &:nth-child(3) {
      background-image: url(~@/assets/images/bg-10.png);
    }
    &:nth-child(4) {
      background-image: url(~@/assets/images/bg-11.png);
    }
    .title {
      margin-top: 0;
      display: flex;
      align-items: center;
      .name {
        font-size: 24px;
        color: #ffffff;
      }
      .icon {
        width: 18px;
        margin-left: 40px;
      }
      .percent {
        font-size: 16px;
        color: #acd6ff;
        margin-left: 4px;
      }
    }
    .text {
      position: relative;
      display: flex;
      align-items: center;
      color: #acd6ff;
      height: 36px;
      .icon {
        width: 70px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color: #ffffff;
        font-size: 15px;
        background-size: 100% 100%;
        letter-spacing: 2px;
        &.to {
          background-image: url(~@/assets/images/menu-7.png);
        }
        &.prev {
          background-image: url(~@/assets/images/menu-8.png);
        }
      }
      .num {
        margin: 0 8px;
        font-size: 24px;
      }
      .dw {
        font-size: 18px;
      }
    }
    .bi {
      color: #6bfaff;
    }
    .money {
      color: #fbe671;
    }
    .border:after {
      position: absolute;
      left: 0;
      bottom: 0;
      content: "";
      width: 200px;
      border-bottom: 1px solid #68ddfa;
    }
  }
}
</style>
